import { useState } from "react";
import { useNavigate, useLocation } from "react-router-dom";
import Micons from "@/components/MIcons/index";

const menuList = [
  {
    title: "Home",
    path: "/home",
    icon: "icon-shouye1",
    color: "#f44336",
    isFruit: false,
    id: 1,
  },
  {
    title: "Tasks",
    path: "/task",
    icon: "icon-renwu",
    color: "#18eaf7",
    isFruit: true,
    id: 2,
  },
  {
    title: "MKT",
    path: "/market",
    icon: "icon-fuwushichang",
    color: "#7c0de3",
    isFruit: false,
    id: 3,
  },
  {
    title: "NFT",
    path: "/nft",
    icon: "icon-hexagon-vertical-nft-slanted",
    color: "#ffc104",
    isFruit: true,
    id: 4,
  },
  {
    title: "My",
    path: "/my",
    icon: "icon-wodejianying",
    color: "#f44336",
    isFruit: true,
    id: 5,
  },
];

const Menu = () => {
  const [items] = useState(menuList);

  // const menuItem = (id: number, newValue: boolean) => {
  //   setItems(
  //     items.map((item) =>
  //       item.id === id ? { ...item, isFruit: newValue } : { ...item, isFruit: false }
  //     )
  //   );
  // };

  const navigate = useNavigate();
  const location = useLocation();

  console.log();
  function handleClick(url: string) {
    navigate(url);
  }

  return (
    <div className="foot-menu">
      <ul>
        {items.map((item) => (
          <li
            key={item.id}
            onClick={() => {
              handleClick(item.path);
            }}
          >
            <div className="item-box">
              <div className="icon">
                <Micons
                  type="extend"
                  className={item.icon}
                  colorFill={
                    location.pathname == item.path
                      ? item.color
                      : "#a7a7a7"
                  }
                />
              </div>
              <div
                className="title"
                style={{
                  color:
                    location.pathname == item.path
                      ? item.color
                      : "#a7a7a7",
                }}
              >
                {item.title}
              </div>
            </div>
          </li>
        ))}
      </ul>
    </div>
  );
};
export default Menu;
